<template>
	<!-- 首页 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view :class="model+'-wrap2'">
				<view class="status_bar">

				</view>
				<!-- 顶部tabbar -->
				<view class="mx-3 flex align-center justify-between">
					<view class="f0">
						<image @click="$tool.navTo('/pages/mine/mine')" style="width: 48rpx;height: 48rpx;"
							:src="'/static/images/index/2_'+model+'.png'" mode="">
						</image>
					</view>
					<view class="topBar flex" :class="model=='light'?'topBarLight':''">
						<view @click="changeTopBarIndex(0)" :class="topBarIndex==0?'item2':'item'"
							class="A-Medium flex-1 flex align-center justify-center">
							{{i18n.i001}}
						</view>
						<view @click="changeTopBarIndex(1)" :class="topBarIndex==1?'item2':'item'"
							class="A-Medium flex-1 flex align-center justify-center">
							{{i18n.i002}}
						</view>
						<view @click="changeTopBarIndex(2)" :class="topBarIndex==2?'item2':'item'"
							class="A-Medium flex-1 flex align-center justify-center">
							{{i18n.i003}}
						</view>
					</view>
					<view class="f0">
						<image @click="clickService" style="width: 48rpx;height: 48rpx;"
							:src="'/static/images/index/3_'+model+'.png'" mode="">
						</image>
					</view>
				</view>
				<!-- 公告 -->
				<view class="notice" @click="$tool.navTo('/pages/index/myMessage')"
					:class="model=='light'?'noticeLight':''">
					<uni-notice-bar :fontSize="13" scrollable="true" :iconSrc="'/static/images/index/4_'+model+'.png'"
						showIcon="true" :color="model=='dark'?'#AAACB8':'rgba(255,255,255,0.7)'"
						:text="noticeText" /></uni-section>
				</view>
				<!-- 资产、收益 -->
				<view @click="clickBtn(-1)" class="flex mt-5 align-center justify-center">
					<view class="moneyType A-Medium">
						{{i18n.i004}}（{{moneyType}}）
					</view>
					<view class="f0">
						<image style="width: 18rpx;height: 12rpx;" :src="'/static/images/downArrow_'+model+'.png'"
							mode="">
						</image>
					</view>
				</view>
				<view class="money D-Bold text-alignC" :class="model=='light'?'moneyLight':''">
					{{
						moneyType=='USDT'?USDTMoney.z:
						moneyType=='BTC'?BTCMoney.z:
						moneyType=='ETH'?ETHMoney.z:''
					}}
				</view>
				<view class="money2 A-Medium text-alignC">
					{{i18n.i005}}
					<text :class="USDTMoney.s<0?'text2':'text'">
						${{
						moneyType=='USDT'?USDTMoney.s:
						moneyType=='BTC'?BTCMoney.s:
						moneyType=='ETH'?ETHMoney.s:''
					}}{{
						moneyType=='USDT'?USDTMoney.b:
						moneyType=='BTC'?BTCMoney.b:
						moneyType=='ETH'?ETHMoney.b:''
					}}%
					</text>
				</view>
				<view class="mx-5 A-Medium mt-3 flex align-center justify-between">
					<view @click="clickBtn(1)" class="flex btn align-center justify-center"
						:class="model=='light'?'btnLight':''">
						<view class="f0 mr-1">
							<image style="width: 36rpx;height: 36rpx;" :src="'/static/images/index/5_'+model+'.png'"
								mode="">
							</image>
						</view>
						<view class="money2" :class="model=='light'?'money2Light':''"
							style="font-size: 26rpx;margin-top: 0;">
							{{i18n.i006}}
						</view>
					</view>
					<view @click="clickBtn(2)" class="flex btn align-center justify-center"
						:class="model=='light'?'btnLight':''">
						<view class="f0 mr-1">
							<image style="width: 36rpx;height: 36rpx;" :src="'/static/images/index/6_'+model+'.png'"
								mode="">
							</image>
						</view>
						<view class="money2" :class="model=='light'?'money2Light':''"
							style="font-size: 26rpx;margin-top: 0;">
							{{i18n.i007}}
						</view>
					</view>
					<view @click="clickBtn(3)" class="flex btn align-center justify-center"
						:class="model=='light'?'btnLight':''">
						<view class="f0 mr-1">
							<image style="width: 36rpx;height: 36rpx;" :src="'/static/images/index/7_'+model+'.png'"
								mode="">
							</image>
						</view>
						<view class="money2" :class="model=='light'?'money2Light':''"
							style="font-size: 26rpx;margin-top: 0;">
							{{i18n.i008}}
						</view>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="m-3">
					<image @click="$tool.navTo('/pages/invitationRewards/invitationRewards')"
						style="width: 690rpx;height: 186rpx;" :src="'/static/images/banner_'+model+'.png'"
						mode="aspectFill">
					</image>
					<!-- <swiper style="height: 186rpx;" :indicator-color="'#7F838D'" :indicator-active-color="'#F7F7F7'"
						:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<image style="width: 690rpx;height: 186rpx;" src="/static/logo.png" mode="aspectFill">
							</image>
						</swiper-item>
						<swiper-item>
							<image style="width: 690rpx;height: 186rpx;" src="/static/logo.png" mode="aspectFill">
							</image>
						</swiper-item>
					</swiper> -->
				</view>
				<!-- 最新报价 -->
				<view class="newPrice flex align-center" :class="model=='light'?'newPriceLight':''">
					<view @click="changePriceType(0)" :class="priceType==0?'item11':'item1'"
						class="flex-1 flex flex-column align-center justify-center">
						<view class="title A-Medium flex align-center justify-center">
							<view class="f0">
								<image v-if="priceType==0" style="width: 28rpx;height: 28rpx;"
									src="/static/images/index/9.png" mode=""></image>
								<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/8.png"
									mode="">
								</image>
							</view>
							BTC
						</view>
						<view class="desc A-Regular">
							{{i18n.i009}}
						</view>
					</view>
					<view @click="changePriceType(1)" :class="priceType==1?'item11':'item1'"
						class="flex-1 flex flex-column align-center justify-center">
						<view class="title A-Medium flex align-center justify-center">
							<view class="f0">
								<image v-if="priceType==1" style="width: 28rpx;height: 28rpx;"
									src="/static/images/index/11.png" mode=""></image>
								<image v-else style="width: 28rpx;height: 28rpx;" src="/static/images/index/10.png"
									mode="">
								</image>
							</view>
							ETH
						</view>
						<view class="desc A-Regular">
							{{i18n.i010}}
						</view>
					</view>
					<view @click="changePriceType(2)" :class="priceType==2?'item22':'item2'"
						class="flex-1 flex flex-column align-center justify-center">
						<view class="f0">
							<image v-if="priceType==2" style="width: 150rpx;height: 44rpx;"
								src="/static/images/index/13.png" mode=""></image>
							<image v-else style="width: 150rpx;height: 44rpx;" src="/static/images/index/12.png"
								mode="">
							</image>
						</view>
						<view class="desc">
							{{i18n.i011}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 报价表 -->
		<view class="A-Regular ml-3">
			<view class="flex titleList mb14 align-center" :class="model=='light'?'titleListLight':''">
				<view style="width: 136rpx;">
					#{{i18n.i012}}
				</view>
				<view style="width: 146rpx;">
					{{i18n.i013}}
				</view>
				<view style="width: 166rpx;">
					{{i18n.i014}}
				</view>
				<view style="width: 146rpx;">
					{{i18n.i015}}
				</view>
				<view style="width: 126rpx;">
					{{i18n.i016}}
				</view>
			</view>
		</view>
		<view class="A-Regular ml-3">
			<template v-if="priceType==0">
				<view v-for="(item,index) in BTCList" :key="index" class="flex valueList mb14 align-center"
					:class="model=='light'?'valueListLight':''">
					<view class="flex align-center" style="width: 136rpx;">
						<view class="valueItem1" :class="model=='light'?'valueItem1Light':''">
							{{index+1}}
						</view>
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/14_'+model+'.png'"
								mode=""></image>
						</view>
						<view>
							{{item.exName}}
						</view>
					</view>
					<view style="width: 146rpx;">
						{{item.symbol}}
					</view>
					<view style="width: 166rpx;">
						${{item.volUsd24h}}{{i18n.i017}}
					</view>
					<view style="width: 146rpx;">
						${{item.price}}
					</view>
					<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						style="width: 126rpx;">
						{{item.priceChangePercent24h}}%
					</view>
				</view>
			</template>
			<template v-if="priceType==1">
				<view v-for="(item,index) in ETHList" :key="index" class="flex valueList mb14 align-center"
					:class="model=='light'?'valueListLight':''">
					<view class="flex align-center" style="width: 136rpx;">
						<view class="valueItem1" :class="model=='light'?'valueItem1Light':''">
							{{index+1}}
						</view>
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/14_'+model+'.png'"
								mode=""></image>
						</view>
						<view>
							{{item.exName}}
						</view>
					</view>
					<view style="width: 146rpx;">
						{{item.symbol}}
					</view>
					<view style="width: 166rpx;">
						${{item.volUsd24h}}{{i18n.i017}}
					</view>
					<view style="width: 146rpx;">
						${{item.price}}
					</view>
					<view :class="(item.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						style="width: 126rpx;">
						{{item.priceChangePercent24h}}%
					</view>
				</view>
			</template>
		</view>
		<!-- 活动 -->
		<view class="guess A-Medium m-3 p-3" :class="model=='light'?'guessLight':''">
			<view class="mb-2 flex align-center">
				<view class="f0">
					<image style="width: 161rpx;height: 37rpx;" :src="'/static/images/index/15_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="guessTitle">
					赢取1个btc大奖励
				</view>
			</view>
			<view class="flex align-center">
				<view class="flex align-center flex-1">
					<view class="f0">
						<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/index/16_'+model+'.png'"
							mode=""></image>
					</view>
					<view class="guessTitle2">
						{{i18n.i018}}：
					</view>
					<view v-if="btcPrice"
						:class="(btcPrice.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						class="mx-1 A-Regular">
						${{(btcPrice.price/1).toFixed(2)}}
					</view>
					<view v-if="btcPrice"
						:class="(btcPrice.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						class="mx-1 A-Regular">
						{{(btcPrice.priceChangePercent24h/1).toFixed(2)}}%
					</view>
				</view>
				<view @click="$tool.navTo('/pages/index/guessingCompetition')" class="flex align-center">
					<view class="guessTitle2">
						{{i18n.i019}}
					</view>
					<view class="f0">
						<image style="width: 28rpx;height: 28rpx;" :src="'/static/images/index/20_'+model+'.png'"
							mode=""></image>
					</view>
				</view>
			</view>
			<view v-if="isCanguess" class="flex align-center">
				<view class="f0">
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/index/17_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="guessTitle2 flex align-center">
					{{i18n.i020}}：
					<view class="times A-Medium">
						{{hours}}
					</view>
					<view class="times A-Medium mx-1">
						{{minutes}}
					</view>
					<view class="times A-Medium">
						{{seconds}}
					</view>
				</view>
			</view>
			<view class="mt-3 mb-1 flex align-center">
				<view class="valueItem3 A-Regular">
					{{rate}}
				</view>
				<view class="flex-1" style="margin: 0 18rpx;background: #53D290;border-radius: 100rpx;height: 20rpx;">

				</view>
				<view class="valueItem2 A-Regular">
					{{rate2}}
				</view>
			</view>
			<template v-if="!isCanguess">
				<view class="flex guessTitle2 align-center justify-center"
					style="margin-top: 22rpx;margin-bottom: 6rpx;">
					{{i18n.i021}}：<view class="valueItem3" style="font-size: 40rpx;">
						{{guessResult=='Bullish'?i18n.i039:i18n.i040}}
					</view>
				</view>
				<view class="flex align-center justify-center">
					<view class="guessTitle2 flex align-center">
						{{i18n.i022}}：
						<view class="times A-Medium">
							{{hours}}
						</view>
						<view class="times A-Medium mx-1">
							{{minutes}}
						</view>
						<view class="times A-Medium">
							{{seconds}}
						</view>
					</view>
				</view>
			</template>
			<view class="guessTitle2 text-alignC" style="font-size: 20rpx;margin-top: 16rpx;margin-bottom: 24rpx;">
				{{i18n.i023}}
			</view>
			<view v-if="isCanguess" class="flex align-center justify-center">
				<view @click="getActivityDetailAdd(1)" class="mr-3 flex align-center justify-center kanz"
					:class="model=='light'?'kanzLight':''">
					<view class="">
						{{i18n.i024}}
					</view>
					<view class="f0">
						<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/18_'+model+'.png'"
							mode="">
						</image>
					</view>
				</view>
				<view @click="getActivityDetailAdd(2)" class="kand flex align-center justify-center"
					:class="model=='light'?'kandLight':''">
					<view class="">
						{{i18n.i025}}
					</view>
					<view class="f0">
						<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/19_'+model+'.png'"
							mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 最新资讯 -->
		<view class="news A-Regular mb-2 p-3 mx-3" :class="model=='light'?'newsLight':''">
			<view class="newsTitle A-Medium">
				{{i18n.i026}}
			</view>
			<view v-for="(item,index) in newList" :key="index"
				@click="$tool.navTo('/pages/index/articleDetail?id='+item.id)" class="mt-3">
				<view class="name text-overflow1">
					{{item.title}}
				</view>
				<view class="time">
					<!-- 2024/5/18 18:58 -->
					{{item.createTime}}
				</view>
			</view>
			<view @click="moreNewsList" class="seeMore mt-3 flex align-center justify-center">
				{{i18n.i027}}
				<view class="f0">
					<image style="width: 28rpx;height: 28rpx;margin-left: 8rpx;"
						:src="'/static/images/index/20_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<czPoup ref="czPoups" :type="btnType" @confirm="czConfirm"></czPoup>
		<view @click="$tool.navTo('/pages/member/member')" class="vipIcon flex align-center justify-center">
			<view class="f0">
				<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" :src="'/static/images/mine/4_'+model+'.png'" mode=""></image>
			</view>
			<view class="" style="font-weight: 700;font-size: 24rpx;color: #FFB41F;">
				{{vipClass}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		newsList,
		getCoinNetworkList,
		noticeList,
		activityDetailAdd,
		activityDetailQueryRate,
		activityDetailQueryResult,
		activityRuleBTC_USDT_PRICE
	} from '@/core/api/index.js';
	import czPoup from '@/components/czPoup.vue';
	export default {
		components: {
			czPoup
		},
		data() {
			return {
				topBarIndex: 1,
				moneyType: 'USDT',
				priceType: 0,
				isCanguess: true,
				guessResult: '',
				rate: '0%',
				rate2: '100%',
				hours: '00',
				minutes: '00',
				seconds: '00',
				timer2: null,
				// 最新资讯
				pageNo: 1,
				pageSize: 3,
				newList: [],
				btnType: 1, //1充值 2转账 3提现
				noticeText: '',
				btcPrice: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			i18n4() {
				return this.$t('last3')
			},
			model() {
				return this.$store.state.config.model
			},
			BTCList() {
				return this.$store.state.config.BTCList
			},
			ETHList() {
				return this.$store.state.config.ETHList
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			BTCMoney() {
				return this.$store.state.config.BTCMoney
			},
			ETHMoney() {
				return this.$store.state.config.ETHMoney
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus
			},
			vipClass() {
				return this.$store.state.config.vipClass;
			},
		},
		onLoad() {
			this.setTabbar();
			if (!uni.getStorageSync('mobileUserId')) {
				return;
			}
			this.$store.commit("config/set_isContinue", true);
			this.$store.commit("config/set_isContinue2", true);
			// 当前BTC指数价
			activityRuleBTC_USDT_PRICE({}).then(res => {
				this.btcPrice = res.result;
			})

			this.getNewsList();
			this.getNoticeList();
			this.getActivityDetailQueryResult();
			this.getActivityDetailQueryRate();
			this.timer2 = setInterval(res => {
				this.getRemainingTimeToday();
			}, 1000)

			if (this.BTCList.length == 0 || this.ETHList.length == 0) {
				this.$tool.showLoading();
				this.$store.dispatch('config/getExchangeListBTC');
				this.$store.dispatch('config/getExchangeListETH');
			}
			this.$store.dispatch('config/getCustomerInfo');
			// 用户余额
			this.$store.dispatch('config/getAassetList');
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {

		},
		methods: {
			clickService() {
				console.log(this.$qiyuModule, 'cs');
				this.$qiyuModule.openServiceActivity({
					title: '在线客服',
					// source: {
					// 	title: 'qiyu',
					// 	//如果需要发送商品卡片，设置商品卡片信息
					// 	productDetail: {
					// 		title: "商品卡片",
					// 		picture: "https://img",
					// 		desc: "我是商品卡片的描述",
					// 		url: "www.xxx.com",
					// 	}
					// },
				})
			},
			changeTopBarIndex(e) {
				if (e != 2) {
					this.$tool.navTo('/pages/trade/trade?topBarIndex=' + e, 4);
					uni.$emit('changeTopBarIndex', e);
				} else {
					this.$tool.navTo('/pages/option/option', 4);
				}
				if (this.topBarIndex == e) {
					return;
				}
				this.topBarIndex = e;
			},
			changePriceType(e) {
				if (e == 2) {
					this.$tool.navTo('/pages/trade/trade?topBarIndex=' + e, 4);
					uni.$emit('changeTopBarIndex', e);
				}
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
			},
			getNewsList() {
				newsList({
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					let list = res.result.records;
					if (this.pageNo == 1) {
						this.newList = list;
					} else {
						if (list.length == 0) {
							this.pageNo--;
							this.$tool.showToast(this.i18n4.l006);
						} else {
							this.newList.push(...list);
						}
					}
				})
			},
			moreNewsList() {
				this.pageNo++;
				this.getNewsList();
			},
			clickBtn(e) {
				this.btnType = e;
				this.$refs.czPoups.open();
				// if(e==1){
				// 	// 充值
				// 	this.$tool.navTo('/pages/property/chongzhi');
				// } else if(e==2){
				// 	// 转账
				// 	this.$tool.navTo('/pages/property/huazhuan')
				// } else if(e==3){
				// 	// 提现
				// 	this.$tool.navTo('/pages/property/tixian')
				// }
			},
			// 充值弹窗
			czConfirm(item) {
				if (this.btnType == 1) {
					// 充值
					uni.setStorageSync('czType', item.value);
					this.$tool.navTo('/pages/property/chongzhi?type=' + item.id);
				} else if (this.btnType == 2) {
					// 转账
					uni.setStorageSync('hzType', item.value);
					this.$tool.navTo('/pages/property/huazhuan?type=' + item.id)
				} else if (this.btnType == 3) {
					// 提现
					uni.setStorageSync('txType', item.value);
					this.$tool.navTo('/pages/property/tixian?type=' + item.id)
				} else if (this.btnType == -1) {
					// 切换
					this.moneyType = item.value;
				}
			},
			getNoticeList() {
				noticeList().then(res => {
					console.log(res, 'cs-noticeList');
					let list = res.result.records;
					this.noticeText = list[0].content;
					// for(let i=0;i<list.length;i++){
					// 	this.noticeText += list[i].content;
					// }
				})
			},
			// 查看你猜结果
			getActivityDetailQueryResult() {
				activityDetailQueryResult({
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					this.guessResult = res.result.guessResult;
					if (this.guessResult) {
						this.isCanguess = false;
					}
				})
			},
			// 看涨或看跌比例
			getActivityDetailQueryRate() {
				activityDetailQueryRate({}).then(res => {
					console.log(res, 'cs-activityDetailQueryRate');
					let list = res.result;
					for (let i = 0; i < list.length; i++) {
						if (list[i].guessResult == 'Bullish') {
							this.rate2 = list[i].rate;
						} else {
							this.rate = list[i].rate;
						}
					}
				})
			},
			// 参与活动
			getActivityDetailAdd(e) {
				activityDetailAdd({
					guessResult: e == 1 ? 'Bullish' : 'Bearish',
					mobileUserId: uni.getStorageSync('mobileUserId')
				}).then(res => {
					console.log(res, 'cs-getActivityDetailAdd');
					this.getActivityDetailQueryResult();
					this.getActivityDetailQueryRate();
				})
			},
			getRemainingTimeToday() {
				let now = new Date();
				let endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
				let remainingMilliseconds = endOfDay - now;
				let remainingSeconds = Math.floor(remainingMilliseconds / 1000);
				let remainingMinutes = Math.floor(remainingSeconds / 60);
				let remainingHours = Math.floor(remainingMinutes / 60);
				remainingSeconds %= 60;
				remainingMinutes %= 60;
				remainingHours %= 24;
				this.hours = remainingHours > 9 ? remainingHours : '0' + remainingHours;
				this.minutes = remainingMinutes > 9 ? remainingMinutes : '0' + remainingMinutes;
				this.seconds = remainingSeconds > 9 ? remainingSeconds : '0' + remainingSeconds;
				if (this.hours == '00' && this.minutes == '00' && this.seconds == '00') {
					clearInterval(this.timer);
					this.timer = null;
					this.getActivityDetailQueryResult();
					this.getActivityDetailQueryRate();
					this.timer = setInterval(res => {
						this.getRemainingTimeToday();
					}, 1000)
				}
			},
			setTabbar() {
				uni.setTabBarItem({
					text: this.i18n4.l001,
					index: 0,
					selectedIconPath: "/static/images/tabbar/index3.png",
				})
				uni.setTabBarItem({
					text: this.i18n4.l002,
					index: 1,
					selectedIconPath: "/static/images/tabbar/market3.png",
				})
				uni.setTabBarItem({
					text: this.i18n4.l003,
					index: 2,
					selectedIconPath: "/static/images/tabbar/trade3.png",
				})
				uni.setTabBarItem({
					text: this.i18n4.l004,
					index: 3,
					selectedIconPath: "/static/images/tabbar/option3.png",
				})
				uni.setTabBarItem({
					text: this.i18n4.l005,
					index: 4,
					selectedIconPath: "/static/images/tabbar/property3.png",
				})
				if (this.model == 'light') {
					uni.setTabBarStyle({
						color: '#7F838D',
						selectedColor: '#5951BA',
						backgroundColor: '#FFFFFF',
						borderStyle: "#E6E8EF",
						success: res => {
							console.log(res, 'cs-setTabBarStyle')
						},
						fail: err => {
							console.log(err, 'cs2-setTabBarStyle')
						}
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.vipIcon {
		width: 118rpx;
		height: 48rpx;
		background: rgba(255,180,31,0.1);
		border-radius: 24rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid rgba(255,180,31,0.3);
		position: fixed;
		top: 294rpx;
		right: 0;
		z-index: 3000000001;
	}
	.kanz {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #F7F7F7;
		border: 2rpx solid #D22540;
		border-radius: 36rpx;

		image {
			margin-left: 8rpx;
		}
	}

	.kanzLight {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #D22540;
		background: rgba(210, 37, 64, 0.1);
		border: 2rpx solid #D22540;
		border-radius: 36rpx;
	}

	.kand {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #F7F7F7;
		border: 2rpx solid #53D290;
		border-radius: 36rpx;

		image {
			margin-left: 8rpx;
		}
	}

	.kandLight {
		padding: 8rpx 28rpx;
		background: rgba(83, 210, 144, 0.1);
		border-radius: 36rpx;
		border: 2rpx solid #53D290;
		font-size: 24rpx;
		color: #53D290;
	}

	.btn {
		width: 178rpx;
		height: 64rpx;
		background: #16181C;
		border-radius: 36rpx;
		border: 2rpx solid #1F2128;
	}

	.btnLight {
		background: rgba(255, 255, 255, 0.1);
		border: 2rpx solid rgba(255, 255, 255, 0.1);
	}

	.mb14 {
		margin-bottom: 14rpx;
	}

	.dark-wrap2 {
		background: url(/static/images/index/1_dark.png);
		background-repeat: no-repeat;
		background-size: 750rpx 958rpx;
		padding-bottom: 30rpx;
	}

	/* 非夜间模式 */
	.light-wrap2 {
		background: url(/static/images/index/1_light.png);
		background-repeat: no-repeat;
		background-size: 750rpx 958rpx;
		padding-bottom: 30rpx;
	}

	// 顶部切换
	.topBar {
		width: 504rpx;
		min-height: 68rpx;
		border-radius: 34rpx;
		border: 2rpx solid #1F2128;
		font-size: 28rpx;

		.item {
			flex-shrink: 0;
			min-height: 64rpx;
			color: #7F838D;
			padding: 14rpx;
		}

		.item2 {
			flex-shrink: 0;
			min-height: 64rpx;
			color: #F7F7F7;
			background: #5951BA;
			border-radius: 34rpx;
			padding: 14rpx;
		}
	}

	.topBarLight {
		background: rgba(255, 255, 255, 0.3);
		border: none;

		.item {
			color: rgba(255, 255, 255, 0.8);
		}

		.item2 {
			color: #5951BA;
			background: #FFFFFF;
		}
	}

	// 公告
	.notice {
		margin: 0 auto;
		width: 690rpx;
		height: 64rpx;
		background: rgba(31, 33, 40, .4);
		border-radius: 54rpx;
		margin-top: 26rpx;
		overflow: hidden;
	}

	.noticeLight {
		background: rgba(255, 255, 255, 0.3);
	}

	// 资产、收益
	.moneyType {
		font-size: 28rpx;
		color: #AAACB8;
	}

	.money {
		margin-top: 16rpx;
		font-weight: bold;
		font-size: 68rpx;
		color: #F7F7F7;
	}

	.moneyLight {
		color: #fff;
	}

	.money2 {
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #AAACB8;

		.text {
			color: #D22540;
		}

		.text2 {
			color: #53D290;
		}
	}

	.money2Light {
		color: #fff;
	}

	// 报价
	.newPrice {
		margin: 0 auto;
		width: 690rpx;
		min-height: 106rpx;
		background: #16181C;
		border-radius: 124rpx 124rpx 124rpx 124rpx;
		border: 2rpx solid #1F2128;

		.item1 {
			flex-shrink: 0;
			min-height: 102rpx;

			.title {
				width: 140rpx;
				height: 44rpx;
				font-size: 28rpx;
				color: #AAACB8;
			}

			.desc {
				font-size: 22rpx;
				color: #7F838D;
			}
		}

		.item11 {
			flex-shrink: 0;
			min-height: 102rpx;
			background: #5951BA;
			border-radius: 10000rpx;

			.title {
				width: 140rpx;
				height: 44rpx;
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.desc {
				font-size: 22rpx;
				color: #F7F7F7;
			}
		}

		.item2 {
			flex-shrink: 0;
			min-height: 102rpx;

			.desc {
				font-size: 22rpx;
				color: #7F838D;
			}
		}

		.item22 {
			flex-shrink: 0;
			min-height: 102rpx;
			background: #5951BA;
			border-radius: 10000rpx;

			.desc {
				font-size: 22rpx;
				color: #F7F7F7;
			}
		}
	}

	.newPriceLight {
		background: rgba(255, 255, 255, 0.4);
		border: none;
	}

	// 报价表
	.titleList {
		font-size: 24rpx;
		color: #AAACB8;
	}

	.titleListLight {
		color: #0E0F11;
	}

	.valueList {
		font-size: 24rpx;
		color: #F7F7F7;
	}

	.valueListLight {
		color: #7F838D;
	}

	.valueItem1 {
		color: #AAACB8;
	}

	.valueItem1Light {
		color: #7F838D;
	}

	.valueItem2 {
		font-size: 24rpx;
		color: #53D290;
	}

	.valueItem3 {
		font-size: 24rpx;
		color: #D22540;
	}

	// 活动
	.guess {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		padding-bottom: 36rpx;

		.guessTitle {
			font-size: 32rpx;
			color: #82DA4C;
		}

		.guessTitle2 {
			font-size: 24rpx;
			color: #7F838D;

			.times {
				width: 36rpx;
				height: 32rpx;
				background: #1F2128;
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.guessLight {
		background: #FFFFFF;
		border: none;

		.guessTitle2 {
			color: #47474A;

			.times {
				background: #0E0F11;
			}
		}
	}

	// 最新资讯
	.news {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		padding-bottom: 32rpx;

		.newsTitle {
			font-size: 32rpx;
			color: #F7F7F7;
		}

		.name {
			font-size: 28rpx;
			color: #AAACB8;
		}

		.time {
			font-size: 24rpx;
			color: #7F838D;
		}

		.seeMore {
			width: 630rpx;
			height: 50rpx;
			background: #1F2128;
			border-radius: 36rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	.newsLight {
		background: #FFF;
		border: none;

		.newsTitle {
			color: #0E0F11;
		}

		.name {
			color: #0E0F11;
		}

		.seeMore {
			background: unset;
			border: 2rpx solid #F4F4F4;
			color: #7F838D;
		}
	}
</style>